<template>
  <div class="app-container tech-page-container">
    <!-- 英雄区域 -->
    <div class="hero-section">
      <!-- <div class="hero-particles">
        <div class="particle" v-for="n in 50" :key="n" :style="getParticleStyle()"></div>
      </div> -->
      <div class="container text-center hero-content">
        <div class="hero-badge">
          <i class="bi bi-lightning-charge-fill"></i>
          <span>AI POWERED SYSTEM</span>
        </div>
        <h1 class="hero-title">
          <span class="title-line">智能银行流水</span>
          <span class="title-line gradient-text">解析系统</span>
        </h1>
        <p class="hero-subtitle">基于AI技术的银行流水智能识别与解析平台<br>支持4000+银行格式，无需编码即可快速适配</p>

        <div class="hero-stats">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="bi bi-cpu-fill"></i>
            </div>
            <h3>智能识别</h3>
            <p>AI驱动的银行格式自动识别</p>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <i class="bi bi-lightning-charge-fill"></i>
            </div>
            <h3>快速解析</h3>
            <p>毫秒级流水数据解析处理</p>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <i class="bi bi-shield-check-fill"></i>
            </div>
            <h3>安全保障</h3>
            <p>企业级安全保障</p>
          </div>
        </div>

        <div class="hero-cta">
          <router-link to="/bank-statement" class="btn-tech btn-primary-tech">
            <span>开始体验</span>
            <i class="bi bi-arrow-right"></i>
            <div class="btn-glow"></div>
          </router-link>
          <router-link to="/template-management" class="btn-tech btn-secondary-tech">
            <span>模板管理</span>
            <i class="bi bi-gear-fill"></i>
            <div class="btn-glow"></div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 功能特性区域 -->
    <div class="features-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心功能</h2>
          <p class="section-subtitle">为您提供完整的银行流水管理解决方案</p>
          <div class="title-decoration"></div>
        </div>

        <div class="features-grid">
          <div class="feature-card-tech">
            <div class="feature-glow"></div>
            <div class="feature-content">
              <div class="feature-icon-tech">
                <i class="bi bi-cloud-upload-fill"></i>
                <div class="icon-orbit"></div>
              </div>
              <h3 class="feature-title">银行流水管理</h3>
              <p class="feature-description">支持多种格式的银行流水文件上传，智能识别银行类型，自动解析流水数据。提供强大的查询、筛选和导出功能。</p>
              <div class="feature-tags">
                <span class="tech-tag">文件上传</span>
                <span class="tech-tag">智能解析</span>
                <span class="tech-tag">数据查询</span>
                <span class="tech-tag">Excel导出</span>
              </div>
              <router-link to="/bank-statement" class="feature-btn">
                <span>立即使用</span>
                <i class="bi bi-arrow-right"></i>
                <div class="btn-particles"></div>
              </router-link>
            </div>
          </div>

          <div class="feature-card-tech">
            <div class="feature-glow"></div>
            <div class="feature-content">
              <div class="feature-icon-tech">
                <i class="bi bi-gear-wide-connected"></i>
                <div class="icon-orbit"></div>
              </div>
              <h3 class="feature-title">模板配置管理</h3>
              <p class="feature-description">可视化的银行解析模板管理，支持新增、编辑、测试银行模板。无需编程知识即可快速适配新的银行格式。</p>
              <div class="feature-tags">
                <span class="tech-tag">模板创建</span>
                <span class="tech-tag">字段映射</span>
                <span class="tech-tag">规则配置</span>
                <span class="tech-tag">模板测试</span>
              </div>
              <router-link to="/template-management" class="feature-btn">
                <span>立即配置</span>
                <i class="bi bi-gear-fill"></i>
                <div class="btn-particles"></div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据区域 -->
    <div class="stats-tech-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-card-tech">
            <div class="stat-glow"></div>
            <div class="stat-number-tech">4000+</div>
            <div class="stat-label">支持银行数量</div>
            <div class="stat-progress">
              <div class="progress-bar" style="width: 100%"></div>
            </div>
          </div>
          <div class="stat-card-tech">
            <div class="stat-glow"></div>
            <div class="stat-number-tech">99.9%</div>
            <div class="stat-label">识别准确率</div>
            <div class="stat-progress">
              <div class="progress-bar" style="width: 99.9%"></div>
            </div>
          </div>
          <div class="stat-card-tech">
            <div class="stat-glow"></div>
            <div class="stat-number-tech">&lt;100ms</div>
            <div class="stat-label">平均解析时间</div>
            <div class="stat-progress">
              <div class="progress-bar" style="width: 95%"></div>
            </div>
          </div>
          <div class="stat-card-tech">
            <div class="stat-glow"></div>
            <div class="stat-number-tech">24/7</div>
            <div class="stat-label">服务可用性</div>
            <div class="stat-progress">
              <div class="progress-bar" style="width: 100%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术优势区域 -->
    <div class="advantages-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">技术优势</h2>
          <p class="section-subtitle">基于先进技术栈构建的企业级解决方案</p>
          <div class="title-decoration"></div>
        </div>

        <div class="advantages-grid">
          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="bi bi-cpu-fill"></i>
              <div class="icon-pulse"></div>
            </div>
            <div class="advantage-content">
              <h3>AI智能识别</h3>
              <p>基于机器学习的银行格式自动识别，持续学习优化识别准确率</p>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>深度学习算法</span>
              </div>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>自适应优化</span>
              </div>
            </div>
          </div>

          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="bi bi-layers-fill"></i>
              <div class="icon-pulse"></div>
            </div>
            <div class="advantage-content">
              <h3>配置化架构</h3>
              <p>模板驱动的解析引擎，支持快速适配新银行格式，无需代码修改</p>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>可视化配置</span>
              </div>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>热更新支持</span>
              </div>
            </div>
          </div>

          <div class="advantage-card">
            <div class="advantage-icon">
              <i class="bi bi-shield-fill-check"></i>
              <div class="icon-pulse"></div>
            </div>
            <div class="advantage-content">
              <h3>安全可靠</h3>
              <p>企业级安全保障，数据加密传输存储，完善的权限控制机制</p>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>端到端加密</span>
              </div>
              <div class="advantage-features">
                <span class="feature-dot"></span>
                <span>多重认证</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 粒子动画逻辑
const getParticleStyle = () => {
  return {
    left: Math.random() * 100 + '%',
    animationDelay: Math.random() * 20 + 's',
    animationDuration: (Math.random() * 10 + 10) + 's'
  }
}

onMounted(() => {
  // 添加鼠标跟随效果
  const handleMouseMove = (e: MouseEvent) => {
    const cursor = document.querySelector('.cursor-glow') as HTMLElement
    if (cursor) {
      cursor.style.left = e.clientX + 'px'
      cursor.style.top = e.clientY + 'px'
    }
  }

  document.addEventListener('mousemove', handleMouseMove)

  // 清理事件监听器
  return () => {
    document.removeEventListener('mousemove', handleMouseMove)
  }
})
</script>

<style scoped>
/* 引入首页特有样式 */
@import '@/styles/home-specific.css';

/* 全局容器 */
.app-container {
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

/* 隐藏 Webkit 浏览器的滚动条 */
.app-container::-webkit-scrollbar {
  display: none;
}
</style>